<template>
  <view class="pageLayout">
    <u--form
      labelPosition="left"
      :model="form"
      :rules="rules"
      ref="MyForm"
      labelWidth="150rpx"
      :labelStyle="labelStyle"
    >
      <view class="base_info">
        <u-form-item
          label="链接类型"
          prop="customerResourceLinkType"
          borderBottom
          @click="showLinkTypePicker = true"
        >
          <myPicker
            :list="linkTypeList"
            :show.sync="showLinkTypePicker"
            @close="closeNotPicker"
            keyName="label"
            v-model="form.customerResourceLinkType"
            idName="value"
            :inputAlign="'right'"
            :iconSize="'24rpx'"
            :fontSize="'24rpx'"
            @confirm="changeLink"
            placeholder="请选择类型"
            :showIcon="false"
          ></myPicker>
        </u-form-item>

        <u-form-item
          label="支付方式"
          prop="payType"
          borderBottom
          @click="showPayTypePicker = true"
        >
          <myPicker
            :list="payTypeList"
            :show.sync="showPayTypePicker"
            @close="closeNotPicker"
            keyName="label"
            v-model="form.payType"
            idName="value"
            :inputAlign="'right'"
            :iconSize="'24rpx'"
            :fontSize="'24rpx'"
            @confirm="changeLink"
            placeholder="请选择类型"
            :showIcon="false"
          ></myPicker>
        </u-form-item>
        <u-form-item
          label="服务类型"
          prop="serviceType"
          borderBottom
          @click="showServiceTypePicker = true"
        >
          <myPicker
            :list="serviceTypeList"
            :show.sync="showServiceTypePicker"
            @close="closeNotPicker"
            keyName="label"
            v-model="form.serviceType"
            idName="value"
            :inputAlign="'right'"
            :iconSize="'24rpx'"
            :fontSize="'24rpx'"
            @confirm="changeLink"
            placeholder="请选择服务"
            :showIcon="false"
          ></myPicker>
        </u-form-item>
        <u-form-item>
          <view class="labelStyle" style="font-size: 24rpx">凭证</view>
          <custom-upload
            v-model="fileList"
            :max-count="1"
            @change="handleFileChange"
          />
        </u-form-item>
      </view>
    </u--form>
    <view class="btn_width">
      <u-button
        class="btn"
        :loading="loading"
        @click="submitForm"
        size="small"
        shape="circle"
        color="#a22d27"
        customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #ffffff;font-weight:700;"
        >确定</u-button
      >
    </view>
    <mytoast ref="toastRef" />
  </view>
</template>
<script>
import store from "../../store/index";
import myPicker from "@/components/myPicker";
import tagPicker from "@/components/tagPicker";
import customUpload from "@/components/customUpload.vue";
import mytoast from "@/components/mytoast.vue";
import { queryCustomerResourceChangeLink } from "@/api/customer/index";
import { commitUpgradeCustomerResourceLink } from "../api/uodataLink/index";
export default {
  components: {
    myPicker,
    tagPicker,
    customUpload,
    mytoast,
  },
  data() {
    return {
      // imgUrl: "https://www.yinyaoit.com",
      id: "",
      showLinkPicker: false, //链接状态
      showLinkTypePicker: false, //链接类型
      showPayTypePicker: false, //链接类型
      showServiceTypePicker: false, //服务类型
      showLevelPicker: false, //SA分级
      showNotPicker: false, //签约结果
      showPicker: false, //
      isFillIn: false,
      loading: false,
      fileList: [],

      tagList: [
        { name: "需跟进", id: "需跟进", customerResourceTagLevel: "Record" },
        { name: "已添加微信", id: "已添加微信", key: "hasWeChat" },
        { name: "无效客资", id: "无效客资", key: "isInvalid" },
        { name: "高意向", id: "高意向", key: "isHignIntention" },
      ], // 标签列表
      labelStyle: {
        "font-size": "24rpx",
      },
      fontSize: "24rpx",
      inputAlign: "right",
      form: {
        linkType: "",
        serviceType: "",
        matchCustomerSourceLevel: "",
        remark: "",
        area: "",
        areaUnit: "",
        budget: "",
        style: "",
        customerResourceState: "",
        customerResourceLinkType: "",
      },
      selectedItems: [],
      hasLinkList: [
        {
          value: true,
          label: "已拍链接",
        },
        {
          value: false,
          label: "未拍链接",
        },
      ],
      payTypeList: [
        // 支付方式
        {
          value: "Weidian",
          label: "微店",
        },
        {
          value: "PublicQRCode",
          label: "二维码-对公",
        },
        {
          value: "RedBook",
          label: "小红书",
        },
        {
          value: "DouYin",
          label: "抖音",
        },
        {
          value: "Kwai",
          label: "快手",
        },
        {
          value: "VideoNumber",
          label: "视频号",
        },
        {
          value: "TaoBao",
          label: "淘宝",
        },
        {
          value: "OverseasOfficial",
          label: "海外官网",
        },
      ],
      serviceTypeList: [
        // 服务类型
        {
          label: "线下带看",
          value: "OfflineViewing",
        },
        {
          label: "线上代买",
          value: "OnLineShipping",
        },
      ],
      linkTypeList: [
        // 链接类型
        {
          label: "1000链接",
          value: "OneThousand",
        },
        // {
        //   label: "4000链接",
        //   value: "FourThousand",
        // },
        {
          label: "5000链接",
          value: "FiveThousand",
        },
      ],
      rules: {
        customerResourceLinkType: [
          {
            type: "string",
            required: true,
            message: "请选择链接类型",
            trigger: ["blur", "change"],
          },
        ],
        payType: [
          {
            type: "string",
            required: true,
            message: "请选择支付类型",
            trigger: ["blur", "change"],
          },
        ],
        // serviceType: [
        //   {
        //     type: "string",
        //     required: true,
        //     message: "请选择服务类型",
        //     trigger: ["blur", "change"],
        //   },
        // ],
      },
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 图片上传反馈
     * @param files 当前文件列表
     */
    handleFileChange(files) {
      console.log("当前文件列表:", files);
    },
    /**
     * 链接状态
     */
    changeLink(val) {
      console.log(val, "changeLink");
    },
    /**
     * 获取客户信息
     */
    getInfo() {
      queryCustomerResourceChangeLink({ customerResourceID: this.id }).then(
        (res) => {
          if (res.data.linkSumAmount >= 1000) {
            this.linkTypeList = [
              {
                label: "5000链接",
                value: "FiveThousand",
              },
            ];
            this.form.customerResourceLinkType = "FiveThousand";
          } else {
            this.linkTypeList = [
              {
                label: "1000链接",
                value: "FiveThousand",
              },
              {
                label: "5000链接",
                value: "FiveThousand",
              },
            ];
          }
          this.form.serviceType = res.data.serviceType;
          this.form.payType = res.data.payType;

          // this.form.customerResourceLinkType = "FourThousand";
        }
      );
    },
    /**
     * 表单提交
     */
    async submitForm() {
      if (this.fileList.length == 0) {
        uni.showToast({
          title: "请上传链接凭证",
          icon: "none",
          duration: 1500,
        });
        return;
      }
      let action = await this.$refs.MyForm.validate();
      if (action) {
        // return;
        let data = {
          customerResourceLinkID: this.linkId,
          serviceType: this.form.serviceType,
          customerResourceLinkType: this.form.customerResourceLinkType,
          payType: this.form.payType,
          upgradeProvePath: this.fileList[0].path,
        };
        commitUpgradeCustomerResourceLink(data)
          .then((res) => {
            uni.showToast({ title: "修改成功", icon: "none" });
            uni.navigateBack();
          })
          .catch((e) => {
            this.$refs.toastRef.showToast({
              msg: e.data.detail,
              duration: 3000,
              position: "center",
            });
          });
        console.log(this.form, "this.form");
      } else {
        uni.showToast({ title: "请完善表单", icon: "none" });
        return false;
      }
    },
    /**
     * 未签约原因选择器
     */
    closeNotPicker() {
      this.$nextTick(() => {
        this.showNotPicker = false;
        this.showLinkPicker = false;
        this.showLinkTypePicker = false;
        this.showPayTypePicker = false;
        this.showServiceTypePicker = false;
        this.showLevelPicker = false;
      });
    },
    /**
     * 标签选择器
     */
    handleConfirm(val) {
      this.$nextTick(() => {
        this.showPicker = false;
      });
    },
  },
  onLoad(options) {
    this.linkId = options.linkId;
    this.id = options.id;
    this.getInfo();
  },
  onShow() {},
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.MyForm.setRules(this.rules);
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>
<style>
page {
  background-color: #f5f7fb;
}
</style>

<style lang="scss" scoped>
.pageLayout {
  padding: 40rpx;
}
.base_info {
  background-color: #ffffff;
  padding: 24rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}
.labelStyle {
  margin-bottom: 24rpx;
}
.submit-container {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #f5f7fb;
}
.btn_width {
  width: 60%;
  margin: 60rpx auto;
}
</style>
